<template>
	<div>
		<app-bar ref="AppBar" title="首页" right-text="关闭" left-text="返回"
		 :appBarStyles="{background:'url(/customer-banner.png) center top / 100% 150px no-repeat'}"
		 @click-left="onClickNavLeft"
			@click-right="onClickNavRight" @click-title="onClickNavTitle" @height-change="onAppBarHeightChange">
			<template #ext>
				<div style="height:75px;width:100%;text-align:center;line-height: 75px;">
					我是状态栏的扩展内容
				</div>
			</template>
		</app-bar>
		<div>
			<img src="https://img.zcool.cn/community/01bb185d43ffb3a8012187f4e52440.jpg@1280w_1l_2o_100sh.jpg"
				style="width: 100%;height: 1200px;" />
		</div>
	</div>

</template>

<script>
	import AppBar from '../components/AppBar.vue'
	export default {
		components: {
			AppBar
		},
		methods: {
			onClickNavLeft() {
				xwbridge.windowHistoryBack();
			},
			onClickNavRight() {
				xwbridge.windowClose();
			},
			onClickNavTitle() {
				alert("点击了导航栏标题")
			},
			onAppBarHeightChange({barHeight,navBarHeightNum}){
				console.log("AppBar的高度是",barHeight,navBarHeightNum)
			}
		}
	}
</script>

<style>
</style>
